<template>
	<div class="padding20">
		<div v-if="!visitFlag && !successFlag">
			<iframe v-show="isIframeLoaded" ref="previewPage" class="result-wrapper" frameborder="0" :src="iframePath" @load="iframeLoad" />
			<div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper"></div>
		</div>
		<div v-if="visitFlag && !successFlag">
			<div class="box">
				<div class="img">
					<img src="../../assets/img/failed.png" mode="widthFix" />
				</div>
				<p>该页面不可访问!</p>
			</div>
			m
		</div>
		<div v-if="successFlag">
			<div class="box">
				<div class="img">
					<img src="../../assets/img/success.png" mode="widthFix" />
				</div>
				<p>提交成功!</p>
			</div>
		</div>
	</div>
</template>

<script>
import { exportDefault } from "@/components/fortress-draggable/utils/index"
import { makeUpHtml } from "@/components/fortress-draggable/generator/html"
import { makeUpJs } from "@/components/fortress-draggable/generator/js"
import { makeUpCss } from "@/components/fortress-draggable/generator/css"
import { formconfigInfo } from "@/api/form/formconfig.js"
import { parse } from "@babel/parser"

const editorObj = {
	html: null,
	js: null,
	css: null,
}
export default {
	data() {
		return {
			viewFlag: false,
			isIframeLoaded: false,
			isInitcode: false, // 保证open后两个异步只执行一次runcode
			isRefreshCode: false, // 每次打开都需要重新刷新代码
			htmlCode: "",
			jsCode: "",
			cssCode: "",
			formData: {},
			generateConf: { type: "file" },
			formConfigData: {
				id: "",
				designContent: "",
				tbContent: "",
				viewContent: "",
			},
			visitFlag: false,
			successFlag: false,
			iframePath: process.env.NODE_ENV === "production" ? "/admin/preview.html" : "/preview.html",
		}
	},
	created() {
		this.formConfigData.id = this.$route.query.id + ""
		if (this.formConfigData.id) {
			this.initInfo(this.formConfigData.id)
		}
		window.addEventListener("message", this.successHandler, false)
	},
	computed: {},
	watch: {},
	methods: {
		initInfo(id) {
			formconfigInfo(id).then(resp => {
				if (resp.code == 0) {
					if (resp.data.status == 1) {
						if (resp.data.viewContent) {
							this.viewFlag = true
							this.formData = JSON.parse(resp.data.viewContent)
							this.onOpen()
						} else {
							this.drawingList = []
						}
					} else {
						this.visitFlag = true
					}
				}
			})
		},
		onOpen() {
			const { type } = this.generateConf
			this.htmlCode = makeUpHtml(this.formData, type)
			this.jsCode = makeUpJs(this.formData, type, this.formConfigData.id)
			this.cssCode = makeUpCss(this.formData)
			this.setEditorValue("editorHtml", "html", this.htmlCode)
			this.setEditorValue("editorJs", "js", this.jsCode)
			this.setEditorValue("editorCss", "css", this.cssCode)
			if (!this.isInitcode) {
				this.isRefreshCode = true
				this.isIframeLoaded && (this.isInitcode = true) && this.runCode()
			}
		},
		setEditorValue(id, type, codeStr) {
			editorObj[type] = codeStr
		},
		runCode() {
			const jsCodeStr = editorObj.js
			try {
				const ast = parse(jsCodeStr, { sourceType: "module" })
				const astBody = ast.program.body
				if (astBody.length > 1) {
					this.$confirm("js格式不能识别，仅支持修改export default的对象内容", "提示", {
						type: "warning",
					})
					return
				}
				if (astBody[0].type === "ExportDefaultDeclaration") {
					const postData = {
						type: "refreshFrame",
						data: {
							generateConf: this.generateConf,
							html: this.htmlCode,
							js: jsCodeStr.replace(exportDefault, ""),
							css: this.cssCode,
							scripts: [],
							links: [],
						},
					}
					this.$refs.previewPage.contentWindow.postMessage(postData, location.origin)
				} else {
					this.$message.error("请使用export default")
				}
			} catch (err) {
				this.$message.error(`js错误：${err}`)
				console.error(err)
			}
		},
		iframeLoad() {
			if (!this.isInitcode) {
				this.isIframeLoaded = true
				this.isRefreshCode && (this.isInitcode = true) && this.runCode()
			}
		},
		successHandler(dd) {
			if (dd && "sumitsuccess" == dd.data) {
				this.successFlag = true
			}
		},
	},
}
</script>

<style lang="scss" scoped>
@import "@/components/fortress-draggable/styles/index";
@import "@/components/fortress-draggable/styles/home";

.result-wrapper {
	height: calc(100vh - 33px);
	width: 100%;
	overflow: auto;
	padding: 12px;
	box-sizing: border-box;
}
.box {
	max-width: 350px;
	width: 65%;
	text-align: center;
	margin: 0 auto;
	margin-top: 10%;
	p {
		text-align: center;
		font-size: 36px;
		margin-bottom: 20px;
	}
}
.img {
	margin: 0 auto 20px;
	width: 100%;
	img {
		width: 100%;
	}
}
</style>
